<!-- eslint-disable prettier/prettier -->
<template>
  <div class="container">
    <Breadcrumb :items="['menu.department', '部门管理']" />
    <div class="content">
      <a-table :columns="columns" :data="data" :load-more="loadMore">
        <template #columns>
          <a-table-column title="序号" data-index="key" />
          <a-table-column title="部门名称" data-index="name" />
          <a-table-column title="邮箱" data-index="salary" />
          <a-table-column title="排序" data-index="address" />
          <a-table-column title="状态" data-index="status">
            <template #cell>
            <a-space>
              <a-button type="primary">启用</a-button>
              <a-button type="primary" status="danger">禁用</a-button>
            </a-space>
          </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
  </div>

</template>

<script lang="ts" setup>
import { reactive } from "vue"
const columns = [
  {
    title: "部门名称",
    dataIndex: "name"
  },
  {
    title: "邮箱",
    dataIndex: "salary"
  },
  {
    title: "排序",
    dataIndex: "address"
  },
  {
    title: "状态",
    dataIndex: "status"
  }
]
const data = reactive([
  {
    key: "1",
    name: "上海市科技公司",
    salary: 23000,
    address: "1",
    status: "dsds",
    children: [
      {
        key: "2",
        name: "深圳总分司",
        salary: 25000,
        address: "35 Park Road, London",
        email: "alisa.ross@example.com"
      },
      {
        key: "5",
        name: "Alisa Ross",
        salary: 25000,
        address: "35 Park Road, London",
        email: "alisa.ross@example.com",
        isLeaf: true
      }
    ]
  },
  {
    key: "6",
    name: "Alisa Ross",
    salary: 25000,
    address: "2",
    email: "alisa.ross@example.com"
  },
  {
    key: "7",
    name: "Kevin Sandra",
    salary: 22000,
    address: "3",
    status: "kevin.sandra@example.com",
    isLeaf: true
  },
  {
    key: "8",
    name: "Ed Hellen",
    salary: 17000,
    address: "4",
    status: "ed.hellen@example.com",
    isLeaf: true
  },
  {
    key: "9",
    name: "William Smith",
    salary: 27000,
    address: "5",
    status: "william.smith@example.com",
    isLeaf: true
  }
])

const loadMore = (record: any, done: any) => {
  window.setTimeout(() => {
    done([
      {
        key: `${record.key}-1`,
        name: "市场部门",
        salary: 17000,
        address: "42 Park Road, London",
        email: "ed.hellen@example.com",
        isLeaf: true
      },
      {
        key: `${record.key}-2`,
        name: "研发部门",
        salary: 27000,
        address: "62 Park Road, London",
        email: "william.smith@example.com",
        isLeaf: true
      }
    ])
  }, 2000)
}
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}
.content {
  margin: 20px;
}
</style>
